import * as React from 'react';
import { useQuery } from '@tanstack/react-query';

export interface ReactQueryContainerProps {
  children: React.ReactNode;
  result: ReturnType<typeof useQuery> | Array<ReturnType<typeof useQuery>>;
  loadingColor?: string;
}

const ReactQueryContainer: React.FC<ReactQueryContainerProps> = function ({ children, result, loadingColor = '#194ebf' }) {
  // 是否首次加载中
  let isLoading;
  // 是否正在请求
  let isFetching;
  let isError;
  let isSuccess;
  let error;

  if (Array.isArray(result)) {
    isLoading = result.every((r) => r.isLoading);
    isFetching = result.every((r) => r.isFetching);
    isError = result.every((r) => r.isError);
    isSuccess = result.every((r) => r.isSuccess);
    error = isError ? (result.find((r) => r.isError)?.error as any).message : '';
  } else {
    isLoading = result.isLoading;
    isFetching = result.isFetching;
    isError = result.isError;
    isSuccess = result.isSuccess;
    error = isError ? (result.error as any).message : '';
  }

  return (
    <>
      {isSuccess && children}
      {(isLoading || isFetching) && (
        <div
          style={{
            width: '100%',
            height: 50,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill={loadingColor} style={{ height: '100%' }}>
            <path transform="translate(2)" d="M0 12 V20 H4 V12z">
              <animate
                attributeName="d"
                values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"
                dur="1.2s"
                repeatCount="indefinite"
                begin="0"
                keyTimes="0;.2;.5;1"
                keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                calcMode="spline"
              />
            </path>
            <path transform="translate(8)" d="M0 12 V20 H4 V12z">
              <animate
                attributeName="d"
                values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"
                dur="1.2s"
                repeatCount="indefinite"
                begin="0.2"
                keyTimes="0;.2;.5;1"
                keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                calcMode="spline"
              />
            </path>
            <path transform="translate(14)" d="M0 12 V20 H4 V12z">
              <animate
                attributeName="d"
                values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"
                dur="1.2s"
                repeatCount="indefinite"
                begin="0.4"
                keyTimes="0;.2;.5;1"
                keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                calcMode="spline"
              />
            </path>
            <path transform="translate(20)" d="M0 12 V20 H4 V12z">
              <animate
                attributeName="d"
                values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"
                dur="1.2s"
                repeatCount="indefinite"
                begin="0.6"
                keyTimes="0;.2;.5;1"
                keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                calcMode="spline"
              />
            </path>
            <path transform="translate(26)" d="M0 12 V20 H4 V12z">
              <animate
                attributeName="d"
                values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"
                dur="1.2s"
                repeatCount="indefinite"
                begin="0.8"
                keyTimes="0;.2;.5;1"
                keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                calcMode="spline"
              />
            </path>
          </svg>
        </div>
      )}
      {isError && (
        <div style={{ background: '#FFF3F1', wordWrap: 'break-word', borderRadius: 5, color: '#1F1E1D' }}>{error || '接口请求失败'}</div>
      )}
    </>
  );
};

export default ReactQueryContainer;
